<template>
  <!-- 投保人信息 -->
  <div class="pb-[15px] px-[15px]">
    <div class="border-b border-[#ECECEC] py-[15px] relative">
      <van-field v-model="Info.name" :disabled="!edit" label-class="label" :name="Info.insure_type"
        :label="Info.insure_type" placeholder="请输入" @blur="inputBlur" :rules="[{ required: true, message: '请输入' }]" />

    </div>
    <div class="border-b border-[#ECECEC] py-[15px]">
      <van-field :disabled="!edit" label-class="label" v-model="Info.contact" name="联系人姓名" label="联系人姓名"
        placeholder="请输入联系人姓名" :rules="[{ required: true, message: '请输入联系人姓名' }]" />
    </div>
    <div class="border-b border-[#ECECEC] py-[15px]">
      <van-field :disabled="!edit" label-class="label" v-model="Info.contact_mobile" name="手机号码" label="手机号码"
        placeholder="请输入手机号码" :rules="[{ required: true, message: '请输入手机号码' }]" />
    </div>
    <div class="border-b border-[#ECECEC] py-[15px] flex items-center w-full">
      <div class="text-[14px] min-w-[100px]">证件类型</div>
      <div class="ml-[10px] flex justify-between items-center w-full" @click="openPop">
        <div class="text-[14px]" :class="edit ? '' : 'text-[#c8c9cc]'">
          {{ Info.card_type ? Info.card_type : "请选择证件类型" }}
        </div>
        <div><van-icon name="arrow" /></div>
      </div>
    </div>
    <div class="border-b border-[#ECECEC] py-[15px]">
      <van-field label-class="label" :disabled="!edit" v-model="Info.card_no" name="证件号码" label="证件号码"
        placeholder="请输入证件号码" :rules="[{ required: true, message: '请输入证件号码' }]" />
    </div>
    <div class="border-b border-[#ECECEC] py-[15px]">
      <van-field :disabled="!edit" label-class="label" v-model="Info.mailbox" name="邮箱" label="邮箱" placeholder="请输入邮箱"
        :rules="[{ required: true, message: '请输入邮箱' }]" />
    </div>
    <div class="border-b border-[#ECECEC] py-[15px]" v-if="false">
      <van-field :disabled="!edit" label-class="label" v-model="Info.address" name="投保区域地址" label="投保区域地址"
        placeholder="请输入投保区域地址" :rules="[{ required: true, message: '投保区域地址' }]" />
    </div>
  </div>
  <div>
    <van-popup v-model:show="show" position="bottom" :style="{ height: '40%' }">
      <van-picker title="证件类型" :columns="columns" @confirm="onConfirm" @cancel="show = false"
        :columns-field-names="{ text: 'label' }" />
    </van-popup>
  </div>
</template>
<script setup lang="ts">
import { reactive, ref, defineProps, watchEffect } from "vue";
import { useRoute } from "vue-router";
import { getBusinessInfo } from "@/utils/api";
const props = defineProps({
  infoTbrxx: { type: Object },
  Info: { type: Object }, //回显数据
  edit: { type: Boolean },
});
const route = useRoute();
const Info = reactive<infoTbrxxType>({
  name: "",
  card_type: "",
  card_no: "",
  contact: "",
  contact_mobile: "",
  mailbox: "",
  insure_type: "单位名称",
  address: ""
});

const show = ref(false);
const columns = ref([] as any[]);
const onConfirm = (selectedValues: any) => {
  Info.card_type = selectedValues.selectedValues[0];
  show.value = false;
  // name.value = selectedValues.selectedOptions[0].text;
  // show.value = false;
};
watchEffect(() => {
  if (props.infoTbrxx) {
    let key: keyof infoTbrxxType;
    for (key in Info) {
      Info[key] = props.infoTbrxx[key];
    }
    Info.insure_type = "单位名称";
  }

  if (props.Info) {
    if (route.query.order_id) {
      //回显
      props?.Info?.bx_info?.cardType.forEach((item: any) => {
        let param = {
          label: item,
          value: item,
        };
        columns.value.push(param);
      });
    } else {
      //填写订单
      if (props.Info?.cardType !== undefined) {
        props.Info.cardType.forEach((item: any) => {
          let param = {
            label: item,
            value: item,
          };
          columns.value.push(param);
        });
        Info.card_type = columns.value[0].label;
      }
    }
  }
});
const inputBlur = async () => {
  const res = await getBusinessInfo({ name: Info.name });
  if (res.code == 1) {
    let i: keyof infoTbrxxType;
    for (i in Info) {
      if (res.msg[i]) {
        Info[i] = res.msg[i];
      }
    }
  }
}

// //更新单位名称
// const getName = () => {
//   if (props.Info?.insure?.insure_type == "姓名") {
//     Info.insure_type = "姓名";
//   } else if (props.Info?.insure?.insure_type == "单位名称") {
//     Info.insure_type = "单位名称";
//   }
// };
//打卡弹窗
const openPop = () => {
  if (!props.edit) return;
  show.value = true;
};
defineExpose({
  Info,
});
// const username = props.Info?.username;
</script>
<style scoped lang="scss">
:deep(.van-cell) {
  padding: 0 !important;
  font-size: 14px !important;
}

:deep(input.van-field__control::-webkit-input-placeholder) {
  color: #c8c9cc;
}

:deep(.label) {
  color: black !important;
}
</style>
